<template>
	<view class="calendars" >
		<view class="calendars_cont">
			
			<block v-for="(item,i) in dataYearArr" :key="i">
				
				<block v-for="(pro,j) in item.yearDay" :key="j">
					<view class="year_block" :data-date="item.year+'/'+(j<9?'0'+(j+1):j+1)+'/'+'01'" :id="'k'+item.year+j">
						{{item.year+"年"+(j+1)+"月"}}
					</view>
					<view class="month_block" >
						<block v-for="(attr,c) in pro" :key="c">
							<view 
							
							class="block_day"
							:class="[
								{block_dayAct:attr.acts === 1 && attr.otherMonth === 'nowMonth' && strNums !== 4},
								{block_dayActRed:attr.acts === 1 && attr.otherMonth === 'nowMonth' && strNums === 4},
							]"
              :data-acts="JSON.stringify(attr)"
							 @click="selectDays(attr,j+1,c)" >
							<!--  -->
								<view class="day_info" >
									<text :class="[
										{info_curDayS:attr.isSelect === 0},
										{info_curDay:attr.isToday},
										{actTexts:attr.acts === 1 && attr.otherMonth === 'nowMonth' && strNums !== 4 && !attr.isToday},
										{actText_acts:attr.acts === 1 && attr.otherMonth === 'nowMonth' && strNums === 4 && !attr.isToday},
										
									]" >{{attr.id}}</text>
									<text class="info_dayt" v-if="attr.isToday">今</text>
									<text v-if="(attr.holiday === 1 && attr.otherMonth === 'nowMonth') && holidayState" 
									:style="{color:attr.holiday === 1?'#FA6400':'','margin-left':attr.isToday?'2rpx':'30rpx'}" >休</text>
									
									<text v-if="setHolidays(attr.date,attr.isWeekState,1) && !holidayState && attr.otherMonth === 'nowMonth'" :style="{color:'#6236FF','margin-left':attr.isToday?'2rpx':'30rpx'}" > 
									 {{setHolidays(attr.date,attr.isWeekState,2).Type === '2'?'补':'休'}}
									 </text>
								</view>
								<view class="day_plans" :style="{background:attr.historyPlan === 2?'#dcf0ff':'#e9e9e9'}" v-if="attr.otherMonth === 'nowMonth' &&attr.acts !== 1 ">
									<text v-if="attr.historyPlan === 1" >初始计划</text> 
									<text v-if="attr.historyPlan === 2" style="color: #0091FF;" >当前计划</text> 
								</view>
								<view 
									class="day_name"
									:style="{'margin-top':!attr.historyPlan && attr.otherMonth === 'nowMonth'?'45rpx':'5rpx'}"
								 	v-if="attr.planTypeName && attr.otherMonth === 'nowMonth' && attr.acts !== 1" 
								>
									{{ 
										attr.planTypeName === "多项任务" ? 
											attr.planTypeName : 
											(attr.planTypeName.length > 1 ? attr.planTypeName.substring(0,2) : attr.planTypeName) 
									}}

									<view 
										class="templateNamesBox" 
										:style="{ backgroundColor : attr.historyPlan === 2 ? '#0091FF':'#999999'}"
										v-if="attr.planTypeName !== '多项任务' && getTemplateNames(attr.planTypeNames).length > 1">{{ getTemplateNames(attr.planTypeNames).length-1 }}</view>
									
								</view>
								<view :class="[
									{actText:attr.acts === 1 && attr.otherMonth === 'nowMonth' && strNums !== 4},
									{actText_act:attr.acts === 1 && attr.otherMonth === 'nowMonth' && strNums === 4},
								]" v-if="attr.acts === 1 && attr.otherMonth === 'nowMonth'">
									本次调整
								</view>
								
							</view>
						</block>
					</view>
				</block>	
			</block>	
		</view>
	</view>
</template>

<script>
// import hldData from '/components/uni-calendar/holidays.js';
import {getHolidays} from '@/apis/sign.js';
export default {
	name: 'work-calendar',
	components: {  },
	props: {
		
		// 全年数据
		datalistYear:{
			type:Array,
			default:()=>[]
		},
		// 休息日显示状态
		holidayState:{
			type:Boolean,
			default:false
		},
		// 1非年审延期 2非年审提前 3年审提前 4年审特殊
		strNums:{
			type:Number,
			default:1
		},
	},
	data() {
		return {
			Month: [],
			year: '',
			month: '',
			nowDate: {
				year: '',
				month: '',
				day: ''
			},
			selectDate: {
				// 选择的日期
				year: '',
				month: '',
				day: ''
			},
			weeks: ['一', '二', '三', '四', '五', '六', '日'],
			dataYearArr:[],
			hldData:{}// 全年节假日
		};
	},
	watch: {
		datalistYear: {
			handler: function (val, oldVal) {
				console.log(val,'datalistYear');
				this.dataYearArr = val;
			},
			deep: true,
			immediate: true
		},
		strNums:{
			handler: function (val, oldVal) {
				this.strNums = val;
				console.log('nistrNums',val);
			},
			deep: true,
			immediate: true
		}, 
	},
	created() {
		this.getHoliday(new Date().getFullYear());
	},
	methods: {
		getTemplateNames(templatesStr) {
			let data = data = templatesStr.replace('%',',').split(',');
			return data;
		},
		// 日历点击
		selectDays(item,yindex,index) {
			this.$emit('selectDays',item,yindex,index);
		},
		getHoliday(year) {
			getHolidays({ year }).then(({data}) => {
				if (data) {
					this.hldData = data || {};
				}
			});
		},
		// 例遍假期
		setHolidays(dd,strs,nums) {
			let date = new Date(dd);
			let y = date.getFullYear();
			let m = this.setMonth(date.getMonth());
			let d = this.set0(date.getDate());
		
			let dateIndex = -1;
			if (this.hldData.Year === y) {// 获取节假日数据
				dateIndex = (this.hldData.JsonStr || []).findIndex(ele => ele.MonthDay === m + '' + d);
			}
			if (nums === 1) {
				if (dateIndex != -1 || strs === '六' || strs === '日') {
					return true;
				}
				return false;
			}
			if (nums === 2) {
				if (dateIndex != -1) {
					if (this.hldData.Year === y) {
						return (this.hldData.JsonStr || [])[dateIndex] || {};
					}
				}
				return {};
			}
		},
		
		setMonth(m) {
			let k = Number(m) + 1;
			if (k < 10) {
				k = '0' + '' + k;
			} else {
				k = k + '';
			}
			return k;
		},
		set0(k) {
			if (k < 10) {
				return '0' + '' + k;
			} else {
				return k + '';
			}
		},
		
	}
};
</script>

<style lang="scss" scoped>
.calendars {
	
	width: 100%;
	&_cont {
		width: 100%;
		
		.year_block{
			display: flex;
			justify-content: center;
			height: 74rpx;
			line-height: 74rpx;
		}
		.month_block{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			// margin-top: -1;
			// margin-bottom: 20rpx;
			
			.block_day{
				width: 92rpx;
				color: #666666;
				border: 1rpx solid #e9e9e9;
				// box-sizing: border-box;
				// margin-left: -1rpx;
				margin-top: -1rpx;
				height: 112rpx;
				z-index: 9;
				padding-bottom: 10rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #666666;
				.day_info{
					margin: 10rpx 0 0 10rpx;
					.info_curDayS{
						font-size: 22rpx;
						font-weight: 400;
						color: #cccccc;
					}
					.info_curDay{
						display: inline-block;
						width: 28rpx;
						height: 28rpx;
						line-height: 28rpx;
						background: #e02020;
						border-radius: 50%;
						font-size: 22rpx;
						font-weight: 400;
						text-align: center;
						color: #ffffff;
						margin-right: 4rpx;
					}
					.info_dayt{
						font-size: 22rpx;
						font-weight: 400;
						color: #333;
					}
					
					.actTexts{
						color: #0091FF;
					}
					.actText_acts{
						color: #e02020;
					}
					
					// width: calc(100% - 20rpx);
				}
				.day_plans{
					background: #e9e9e9;
					border-radius: 4rpx;
					padding: 0 2rpx;
					margin: 8rpx 2rpx;
					font-size: 20rpx;
					font-weight: 400;
					text-align: center;
					color: #666666;
				}
				.day_name{
					text-align: left;
					font-size: 22rpx;
					font-weight: 600;
					color: #333333;
					margin-left: 2px;
					display: flex;
					justify-content: space-between;
				}

				.templateNamesBox {
					background-color: #999;
					color: #fff;
					font-size: 10px;
					font-weight: 500;
					border-radius: 14px;
					width: 16px;
					height: 16px;
					text-align: center;
				}
				
				.actText{
					width: 50rpx;
					margin-left: 20rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #0091FF;
				}
				.actText_act{
					width: 50rpx;
					margin-left: 20rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #e02020;
				}
				
			}
			.block_dayAct{
				border:1rpx #0091FF solid;
				margin-bottom: 1rpx;
				// box-sizing: border-box;
				// width: 92rpx;
				// height: 112rpx;
			}
			.block_dayActRed{
				border:1rpx #e02020 solid;
				margin-bottom: 1rpx;
				// box-sizing: border-box;
				// width: 92rpx;
				// height: 112rpx;
			}
		}
	}
}
</style>
